<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<script src="/ka/js/config.js"></script>
<html>
<head>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">

    <title>首页</title>
    <link rel="shortcut icon" href="/ka/img/favicon.ico">
    <!--<link rel="stylesheet" href="/css/index.css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="/ka/css/bootstrap.min.css">
    <link rel="stylesheet" href="/ka/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/ka/css/font-icon-style.css">
    <link rel="stylesheet" href="/ka/css/style.default.css" id="theme-stylesheet">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="/ka/css/ui-elements/card.css">
    <link rel="stylesheet" href="/ka/css/style.css">
</head>

<body>
<div id="app">
    <!--页头-->
    <header class="header">
        <nav class="navbar navbar-expand-lg ">
            <div class="search-box">
                <button class="dismiss"><i class="icon-close"></i></button>
                <form id="searchForm" action="#" role="search">
                    <input type="search" placeholder="Search Now" class="form-control">
                </form>
            </div>
            <div class="container-fluid ">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <div class="navbar-header">
                        <a href="" class="navbar-brand">
                            <div class="brand-text brand-big hidden-lg-down"><img src="/ka/img/logo-white.png" alt="Logo"
                                                                                  class="img-fluid"></div>
                            <div class="brand-text brand-small"><img src="/ka/img/logo-icon.png" alt="Logo"
                                                                     class="img-fluid">
                            </div>
                        </a>
                        <a id="toggle-btn" href="#" class="menu-btn active">
                            <span></span>
                            <span></span>
                            <span></span>
                        </a>
                    </div>
                </div>
                <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                    <!-- 全屏按钮-->
                    <li class="nav-item d-flex align-items-center full_scr_exp"><a class="nav-link" href="#"><img
                            src="/ka/img/expand.png" onclick="toggleFullScreen(document.body)" class="img-fluid"
                            alt=""></a>
                    </li>
                    <!-- 退出图片-->
                    <li class="nav-item dropdown"><a id="profile" class="nav-link logout" data-target="#" href="#"
                                                     data-toggle="dropdown" aria-haspopup="true"
                                                     aria-expanded="false"><img
                            src="/ka/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"
                            style="height: 30px; width: 30px;"></a>
                        <ul aria-labelledby="profile" class="dropdown-menu profile">
                            <!--                        注销弹框-->
                            <li>
                                <a rel="nofollow" @click="logout" class="dropdown-item">
                                    <div class="notification">
                                        <div class="notification-content"><i class="fa fa-power-off"></i>注销</div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <!--整个页面-->
    <div class="page-content d-flex align-items-stretch">
        <!--用户信息-->
        <nav class="side-navbar">
            <div class="sidebar-header d-flex align-items-center"></div>
            <div style="text-align: center" v-cloak>欢迎{{nikeName}}!</div>
            <hr>
            <!--      菜单侧边栏-->
            <ul class="list-unstyled">
                <li class="active"><a href=""><i class="fa fa-bar-chart"></i>首页</a></li>
                <li><a href="/ka/toChange" aria-expanded="false"> <i class="fa fa-building-o"></i>记账</a></li>
                <li><a href="/ka/toLog"> <i class="fa fa-map-o"></i>账单</a></li>
                <li><a href="" aria-expanded="false"> <i class="fa fa-file-o"></i>统计</a></li>
            </ul>
        </nav>

        <div class="content-inner">
            <!--***** REPORT-1 *****-->
            <div class="row" id="report1">
                <div class="col-sm-2">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0" v-cloak><i class="ti-arrow-up text-success"></i>￥{{baseInfo.account}}
                                </h2>
                                <span class="text-muted">我的余额</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0" v-cloak><i class="ti-arrow-up text-success"></i>
                                    ￥{{baseInfo.todayUse}}</h2>
                                <span class="text-muted">今日消费</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0" v-cloak><i class="ti-arrow-up text-danger"></i>
                                    ￥{{baseInfo.weekUse}}</h2>
                                <span class="text-muted">一周消费</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0" v-cloak><i class="ti-arrow-up text-warning"></i>￥
                                    {{baseInfo.monthUse}}</h2>
                                <span class="text-muted">本月消费</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0" v-cloak><i class="ti-arrow-up text-info"></i>
                                    ￥{{baseInfo.yearUse}}</h2>
                                <span class="text-muted">本年消费</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0" v-cloak><i class="ti-arrow-up text-info"></i>￥{{baseInfo.monthAvgUse}}
                                </h2>
                                <span class="text-muted">本月日均消费</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--***** REPORT-2 *****-->
            <div class="row" id="report2">
                <div class="col-md-4">
                    <div style="text-align: center">
                        <el-select v-model="week" disabled placeholder="暂不可用">

                        </el-select>
                    </div>
                    <div class="card card-c1">
                        <div class="card-header card-chart" data-background-color="green">
                            <div class="ct-chart" id="week-chart" style="height:300px;"></div>
                        </div>
                        <div class="card-content">
                            <h4 class="title">本周消费</h4>
                            <p class="category">
                                <span class="text-success"></span>展示您一周之内的个人消费情况</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="text-align: center">
                        <el-date-picker
                                v-model="ratioYearDate"
                                type="year"
                                format="yyyy年"
                                value-format="yyyy"
                                @blur="getRatioYearChartData(ratioYearDate)"
                                placeholder="年统计:请选择年份">
                        </el-date-picker>
                        <el-date-picker
                                v-model="ratioDate"
                                type="month"
                                format="yyyy年MM月"
                                value-format="yyyy-MM-dd"
                                @blur="getRatioChartData(ratioDate)"
                                placeholder="月统计:请选择月份">
                        </el-date-picker>
                    </div>
                    <div class="card card-c1">
                        <div class="card-header card-chart" data-background-color="orange">
                            <div class="ct-chart" id="ratio" style="height:300px;"></div>
                        </div>
                        <div class="card-content">
                            <h4 class="title">消费比例</h4>
                            <p class="category">展示您选择时间段内的消费比例情况</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="text-align: center">
                        <el-date-picker
                                v-model="curveDate"
                                type="month"
                                format="yyyy年MM月"
                                value-format="yyyy-MM-dd"
                                @blur="getCurveChartData(curveDate)"
                                placeholder="请选择月">
                        </el-date-picker>
                    </div>
                    <div class="card card-c1">

                        <div class="card-header card-chart" data-background-color="red">
                            <div class="ct-chart" id="curve" style="height:300px;"></div>
                        </div>
                        <div class="card-content">
                            <h4 class="title">消费曲线</h4>
                            <p class="category">展示您选择月份的消费曲线情况</p>
                        </div>
                    </div>
                </div>
            </div>


            <!--页脚-->
            <div class="row">
                <div class="col-md-3">
                    <div class="card text-center social-bottom sb-fb">
                        <i class="fa fa-facebook"></i>
                        <div>3250 +</div>
                        <p>Likes</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center social-bottom sb-tw">
                        <i class="fa fa-twitter"></i>
                        <div>2345 +</div>
                        <p>Following</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center social-bottom sb-gp">
                        <i class="fa fa-google-plus"></i>
                        <div>1253 +</div>
                        <p>Followers</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center social-bottom sb-in">
                        <i class="fa fa-instagram"></i>
                        <div>4524 +</div>
                        <p>Likes</p>
                    </div>
                </div>
            </div>
            <div style="text-align: center;line-height: 50px;">Copyright &copy; 2020Company name All rights reserved
            </div>
        </div>

    </div>

</div>

</body>
<!--Global Javascript -->
<script src="/ka/js/jquery.min.js"></script>
<script src="/ka/js/popper/popper.min.js"></script>
<script src="/ka/js/tether.min.js"></script>
<script src="/ka/js/bootstrap.min.js"></script>
<script src="/ka/js/jquery.cookie.js"></script>
<script src="/ka/js/jquery.validate.min.js"></script>
<script src="/ka/js/front.js"></script>


<!--<script src="/js/echarts.min.js"></script>-->
<!--<script src="/js/vue/vue.js"></script>-->
<!--<script src="/js/vue/axios.js"></script>-->
<!--<script src="/js/vue/index.js"></script>-->
<!--<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>


<script th:inline="javascript">
    var app = new Vue({
            el: "#app",
            data: {
                baseInfo: {
                    account: 0,
                    todayUse: 0,
                    weekUse: 0,
                    monthUse: 0,
                    yearUse: 0,
                    monthAvgUse: 0,
                },
                userId: "",
                nikeName: "",
                weekChartData: [],
                weekChartSeries: [],
                ratioData: [],
                curveData: [],
                curveDataSeries: [],
                curveDate: "",
                ratioDate: "",
                ratioYearDate: "",
                week: ""
            },
            methods: {
                logout() {
                    location.href = 'toLogin';
                    var uid = getCookie("uid");
                    clearCookie("userId");
                    clearCookie("uid");
                    clearCookie("Authorization");
                    clearCookie("username");
                    axios.post("/ka/oauth/logout", {uid: uid}).then(function (response) {
                        if (response.data.flag) {
                            location.href = 'toLogin';
                        } else {
                            location.href = 'toLogin';
                        }
                    })
                },
                getWeekChartData() {
                    axios.post("/ka/accountLog/getWeekChartData", {userId: this.userId}).then((response) => {
                        if (response.data.flag) {
                            // this.weekChartData = ["6.8", "6.9", "6.10", "6.11", "6.12", "6.13", "6.14"];
                            this.weekChartData = response.data.data.weekChartData;
                            this.weekChartSeries = response.data.data.weekChartSeries;
                            // 基于准备好的dom，初始化echarts实例
                            var weekChart = echarts.init(document.getElementById('week-chart'));
                            // 指定图表的配置项和数据
                            var weekChartOption = {
                                color: ['#73de37'],
                                tooltip: {},
                                legend: {
                                    data: ['消费金额'],

                                },
                                xAxis: {
                                    data: this.weekChartData
                                },
                                yAxis: {},
                                series: [{
                                    name: '消费金额',
                                    type: 'bar',
                                    barWidth: 25,
                                    data: this.weekChartSeries,
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true, // 开启显示
                                                position: 'top', // 在上方显示
                                                textStyle: { // 数值样式
                                                    color: function (params) {
                                                        // build a color map as your need.
                                                        var colorList = [
                                                            '#1DA1F2', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                                        ];
                                                        return colorList[params.dataIndex]
                                                    },
                                                    fontSize: 16
                                                }
                                            },
                                            color: function (params) {
                                                // build a color map as your need.
                                                var colorList = [
                                                    '#1DA1F2', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                                ];
                                                return colorList[params.dataIndex]
                                            },
                                        }
                                    }
                                }]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            weekChart.setOption(weekChartOption);
                        }
                    });
                },
                getRatioChartData(date) {
                    axios.post("/ka/accountLog/getRatioChartData", {date, userId: this.userId}).then((response) => {
                        if (response.data.flag) {
                            // 数据数组，name 为数据项名称，value 为数据项值 {value: 235, name: '餐饮'}
                            this.ratioData = response.data.data;
                            // 基于准备好的dom，初始化echarts实例
                            var ratio = echarts.init(document.getElementById('ratio'));
                            // 指定图表的配置项和数据
                            var ratioOption = {
                                color: ['#1DA1F2', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'],
                                tooltip: {
                                    formatter: '{b}:{c}元 \n 占{d}%'
                                },
                                legend: {
                                    data: ['餐饮', '通讯', '交通', '购物', '住房', '娱乐', '医疗', '教育', '红包',
                                        '旅行', '投资', '还款', '宠物', '还债', '其他'
                                    ]

                                },
                                series: [
                                    {
                                        name: '消费金额',
                                        type: 'pie',    // 设置图表类型为饼图
                                        radius: ['20%', '40%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                        data: this.ratioData,
                                        label: {
                                            normal: {
                                                show: true,
                                                padding: [0, 0],
                                                formatter: '{b}:{c}元 \n 占{d}%'
                                            }
                                        }
                                    }

                                ]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            ratio.setOption(ratioOption);
                        }
                    });
                },
                getRatioYearChartData(year) {
                    axios.post("/ka/accountLog/getRatioChartData", {year, userId: this.userId}).then((response) => {
                        if (response.data.flag) {
                            // 数据数组，name 为数据项名称，value 为数据项值 {value: 235, name: '餐饮'}
                            this.ratioData = response.data.data;
                            // 基于准备好的dom，初始化echarts实例
                            var ratio = echarts.init(document.getElementById('ratio'));
                            // 指定图表的配置项和数据
                            var ratioOption = {
                                color: ['#1DA1F2', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'],
                                tooltip: {},
                                legend: {
                                    data: ['餐饮', '通讯', '交通', '购物', '住房', '娱乐', '医疗', '教育', '红包',
                                        '旅行', '投资', '还款', '宠物', '还债', '其他'
                                    ]

                                },
                                series: [
                                    {
                                        name: '消费金额',
                                        type: 'pie',    // 设置图表类型为饼图
                                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                        data: this.ratioData
                                    }
                                ]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            ratio.setOption(ratioOption);
                        }
                    });
                },
                getCurveChartData(date) {
                    axios.post("/ka/accountLog/getCurveChartData", {date, userId: this.userId}).then((response) => {
                        if (response.data.flag) {
                            this.curveData = response.data.data.curveData;
                            this.curveDataSeries = response.data.data.curveDataSeries;
                            // 基于准备好的dom，初始化echarts实例
                            var curveChart = echarts.init(document.getElementById('curve'));
                            // 指定图表的配置项和数据
                            var curveChartOption = {
                                color: ['#0ac1ce'],
                                tooltip: {},
                                legend: {
                                    data: ['累积消费金额'],

                                },
                                xAxis: {
                                    type: 'category',
                                    data: this.curveData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '累积消费金额',
                                    data: this.curveDataSeries,
                                    type: 'line',
                                    smooth: true,
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    },
                                }]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            curveChart.setOption(curveChartOption);
                        }
                    });
                },
            },
            created: function () {
                let userId = getCookie("userId");
                if (userId === '' || userId === null) {
                    location.href = '/ka/toLogin';
                    return;
                } else {
                    this.userId = userId;
                }
                let useraneme = getCookie("username");
                if (useraneme === '' || useraneme === null) {
                    this.nikeName = '';
                } else {
                    this.nikeName = ',' + useraneme;
                }
                axios.post("/ka/accountLog/baseInfo", {userId: this.userId}).then((response) => {
                    if (response.data.flag) {
                        app.baseInfo = response.data.data;
                    }
                });


            }, mounted() {
                this.getWeekChartData();
                this.getRatioChartData();
                this.getCurveChartData();
            }
        })
    ;
</script>
</html>